<template>
  <div class="wrapper">
    <div class="top" v-if="this.$store.state.login">
      <div class="loginhead" v-for="(item,index) in user" :key="item.user_id">
        <div class="flex border">
          <div class="flexprimary">
            <div class="name">{{item.username}}</div>
            <div class="somedesc">{{item.geyan}}</div>
          </div>
          <div class="useravatar" >
            <!--            <img :src="url" alt="" class="avatar" @click="loadImg">-->
            <img  alt="" :src='head' class="avatar" style="position:relative;right: -119px;">
            <!--            <input hidden type="file" accept="image/jpeg,image/jpg,image/png" capture="camera" @change="fileInput" >-->
            <input type="file" name="image" accept="image/jpeg,image/jpg,image/png" @change='onchangeImgFun' style="position: relative;left: 0;top: 0;opacity: 0;">
          </div>
        </div>
        <div class="flex">
          <div class="numbox">
            <span class="num">345</span>
            <span class="numname">被赞数</span>
          </div>
          <div class="numbox">
            <span class="num">{{item.focusnum}}</span>
            <span class="numname">关注数</span>
          </div>
          <div class="numbox">
            <span class="num">{{item.fensi}}</span>
            <span class="numname">粉丝数</span>
          </div>
        </div>
      </div>

      <div class="open flex">
        <div class="flexprimary">
          <p class="openvip">开通趣多多号！</p>
          <p class="tipinfo">就可以看到sei关注你啦</p>
        </div>
        <router-link to="/register" class="on" style="    text-decoration: none;text-align: center;padding-top: 10px;font-size: 18px;color: black;">开通</router-link>
      </div>
    </div>
    <div v-else class="head">
      <div class="welcome">
        欢迎来到趣多多
      </div>
      <button class="login"@click="tologin">马上登录</button>
      <div class="animate"></div>
    </div>
    <div class="list">
      <ul class="itemlist">
        <li class="item" @click="ziliao"><div class="iconfont">&#xe8ac;</div>基本资料</li>
        <li class="item" @click="edit"><div class="iconfont">&#xe8b2;</div>修改信息</li>
        <li class="item"><div class="iconfont">&#xe61f;</div>我发布的</li>
        <li class="item"><div class="iconfont">&#xe8ad;</div>我赞过的</li>
      </ul>
    </div>
    <div class="list" v-if="this.$store.state.login">
      <ul class="itemlist">
        <li class="item item8" style="margin-top: 5px"><div class="iconfont">&#xe8ab;</div>我的公益</li>
        <li class="item item10"><div class="iconfont">&#xe8c3;</div>帮助与反馈</li>
      </ul>
    </div>
    <div class="list">
      <ul class="itemlist">
        <li class="item item7"><div class="iconfont">&#xe8b7;</div>设置</li>
      </ul>
    </div>
    <div class="buttonwrap">
      <button class="logout" @click="loginout">退出登录</button>
    </div>
    <div class="block"></div>
    <NavBottom ></NavBottom>

  </div>


</template>
<script>
    import NavBottom from '../../../common/NavBottom'
    import axios from 'axios'

    export default {
        name: "PersonalContent",
        components: {
            NavBottom
        },
        data() {
            return {
                head: require('../../../assets/styles/picture/头像.jpg'),
                user:[],
                user_id:'',
                username:'',
                geyan:'',
                focusnum:0,
                fensi:0
            }
        },
        computed:{
            login () {
                return this.$store.state.login
            }
        },
        methods: {
            ziliao () {
              this.$router.push("/personalindex")
            },
            edit () {
                this.$router.push("/personaledit")
            },
            onchangeImgFun(e) {
                var file = e.target.files[0]
                // 获取图片的大小，做大小限制有用
                let imgSize = file.size
                console.log(imgSize)
                var _this = this // this指向问题，所以在外面先定义
                // 比如上传头像限制5M大小，这里获取的大小单位是b
                if (imgSize <= 50 * 1024) {
                    // 合格
                    // 开始渲染选择的图片
                    // 本地路径方法 1
                    this.head = window.URL.createObjectURL(e.target.files[0])
                    console.log(window.URL.createObjectURL(e.target.files[0])) // 获取当前文件的信息
                }
            },
            tologin () {
                this.$router.push({path:'/'})
            },
            loginout () {
                this.$store.state.login=false
                this.$router.push('/personal')
            },
        },
        mounted () {
            axios.get('/api/personal/index.html')
                .then((res) => {
                    console.log(res);
                    this.user = res.data.data;
                    if(this.user===null){
                        console.log('user为空')
                    }
                })
                .catch((err) => {
                    console.log(err);
                });

            //     axios.get('/api/emplist/depts.html')
            //         .then((res) => {
            //             console.log(res);
            //             this.depts = res.data.data;
            //         })
            //         .catch((err) => {
            //             console.log(err);
            //         });
        }
    }
</script>
<style lang="css" scoped>

  ul,li {
    list-style: none;
  }
  .wrapper {
    width: 100%;
    min-height: 48rem;
    background-color: #f3f3f3;
  }
  .buttonwrap {
    width: 100%;
  }
  .logout {
    display: block;
    width: 95%;
    font-size: 1.3rem;
    margin: 1rem auto;
    height: 4rem;
    outline: none;
    border: none;
    background-color: red;
    color: white;
  }
  .top{
    width: 100%;
  }
  .head {
    position: relative;
    width: 100%;
    height: 10rem;
    background-color: #fff;
  }
  .loginhead {
    width: 100%;
    height: 15rem;
    background-color: #fff;
    padding: 0 1.2rem;
    box-sizing: border-box;
  }
  .open {
    width: 100%;
    height: 6rem;
    margin-bottom: 1rem;
    padding: 0 1.2rem;
    box-sizing: border-box;
    background-color: lightblue;
  }
  .openvip {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: .4rem;
  }
  .tipinfo {
    font-size: 1.2rem;
  }
  .on{
    border: none;
    width: 7rem;
    height: 2.8rem;
    box-sizing: border-box;
    border: 1px solid #333;
    outline: none;
    background-color: transparent;
  }
  .flex {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .border {
    border-bottom: 1px solid #f8f8d8;
    height: 10rem;
    margin-top: -15px;
  }
  .border:after {
    content: '';
    display: inline-block;
    height: .8rem;
    width: .8rem;
    border-width: 2px 2px 0 0;
    border-color:#999;
    border-style: solid;
    transform: rotate(45deg);
    position: absolute;
    right: 1rem;
  }
  .flexprimary {
    flex:1;
  }
  .flexprimary .name{
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: .4rem;
  }
  .flexprimary .somedesc{
    font-size: 1.2rem;
    color: #888;
    width: 100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .useravatar {
    width: 5rem;
    height: 5rem;
    background-color: #f9f9f9;
    border-radius: 50%;
    margin-right: 1.5rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .useravatar img{
    width: 100%;
    border-radius: 50%;
    margin-right: -20px;

  }
  .iconfont{
    margin-left: -20px;
  }
  .numbox {
    flex: 1;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50px;
  }
  .num {
    color: #000;
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: .2rem;
  }
  .numname {
    color: #888;
    font-size: 1.3rem;
  }
  .block {
    height: 55px;
  }
  .head .animate {
    position: absolute;
    bottom: 0;
    right: 3rem;
    width: 15.6rem;
    height: 100%;
    background-position: 100% 100%;
  }
  .head .welcome {
    margin-left: 1.2rem;
    margin-top: 2rem;
    font-size: 2rem;
    font-weight: 600;
  }
  .head .login {
    margin-top: 1rem;
    margin-left: 1.2rem;
    width: 8rem;
    height: 3.6rem;
    background-color: #ffda44;
    outline: none;
    border: none;
  }
  .list {
    margin-top: 1rem;
    width: 100%;
    height: auto;
    background-color: #fff;
    font-size: 1.4rem;
  }
  .item {
    padding: 1.2rem 3.5rem;
    border: 1px solid #f8f8f8;
    box-sizing: border-box;
    position: relative;
    margin-top: -15px;
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
    background-position: 1rem 1rem;
  }
  .number {
    position: absolute;
    right: 3rem;
    color: #888;
  }
  .item:last-child {
    border-bottom: none;
  }
  .item:after {
    content: '';
    display: inline-block;
    height: .8rem;
    width: .8rem;
    border-width: 2px 2px 0 0;
    border-color:#999;
    border-style: solid;
    transform: rotate(45deg);
    position: absolute;
    right: 1rem;
    top: 1.5rem;
  }
</style>
